<template>
	    <div class="pl12 pr12 pb12">
                  <Card class="Position paC my-card1">
                    <tab-card
                      title="财务管理平台"
                      height="305"
                      ref="tabCardCai"
                      @Open="tabCardClick({index:$refs.tabCardCai.cardLine,url:cardCai,url1:cardCai1})"
                    >
                      <div slot="content1" ref="list1">
                        <div
                          class="message-content flex-a"
                          v-for="(item,index) in cardCai"
                          :key="index"
                          @click=" fromSummit(item.value,{
                                                authToken:accessToken,
                                                 templateName:item.code,
                                                 infoID:item.infoId})"
                        >
                          <p class="wh1 flex Position span-message" :id="`list${index}`">
                            <span class="dian dian-black"></span>
                            <span
                              class="span-Eli Ellipsis"
                              :style="{width:cardWidth+'px'}"
                            >{{item.title}}</span>
                            <span class="message-name">{{item.name}}</span>
                            <span class="message-timer">{{item.createTime}}</span>
                          </p>
                        </div>
                      </div>
                      <div slot="content0">
                        <div
                          class="message-content flex-a"
                          v-for="(item,index) in  cardCai1"
                          :key="index"
                          @click=" fromSummit(item.value,{
                                                authToken:accessToken,
                                                 templateName:item.code,
                                                 infoID:item.infoId})"
                        >
                          <p class="wh1 flex Position span-message" :id="`list${index}`">
                            <span class="dian dian-black"></span>
                            <span
                              class="span-Eli Ellipsis"
                              :style="{width:Width+'px'}"
                            >{{item.title}}</span>
                            <span class="message-name">{{item.name}}</span>
                            <span class="message-timer">{{ item.updateTime}}</span>
                          </p>
                        </div>
                      </div>
                    </tab-card>
                  </Card>
                </div>
</template>

<script>
import Cookies from 'js-cookie'
import { fromPost, openHref, screenW, onSize } from '@/libs/tool'
import tabCard from '@/components/card/tabCard.vue'
import {
  fullList
} from "@/api/index.js";
export default {
	name: 'design-platform-hr',
	components: { tabCard },
	props: {},
	data() {
		return {
			userInfo: '', //用户信息
            accessToken: '',
            cardCai1:'',
            cardCai:'',
            setTime: "",
			Width: 0, //新闻宽度超出显示省略号
			screenWidth: screenW(), //屏幕宽度
		}
	},
	watch: {
		screenWidth(val) {
			this.screenWidth = val
			this.onWidth()
		},
	},
	computed: {},
	methods: {
		fromSummit: fromPost,
		openHref: openHref,
		init() {
            let userInfo = JSON.parse(Cookies.get('userInfo'))	
              this.fullAdd(
           {
            num: 6,
            moduleName: "HR",
            code: "todo",
            userCode:this.userInfo.idcard
          },
          "cardCai"
        );
        this.fullAdd(
           {
            num: 6,
            moduleName: "HR",
            code: "done",
            userCode: this.userInfo.idcard
          },
          "cardCai1"
        );	
        },
         timerTool: function(time) {
      //轮询时间
      let that = this;
      this.setTime = setInterval(function() {
        that.fullAdd(
           {
            num: 6,
            moduleName: "HR",
            code: "todo",
            userCode: that.userInfo.idcard
          },
          "cardCai"
        );
        that.fullAdd(
          {
            num: 6,
            moduleName: "HR",
            code: "done",
            userCode: that.userInfo.idcard
          },
          "cardCai1"
        );
      }, time);
    },
       fullAdd(data, key) {
      //已办，代办
      fullList(data).then(res => {
        if (res.success) {
          this[key] = res.result;
        } else {
          clearInterval(this.setTime);
        }
      });
    },
	    tabCardClick(item) {
      if (item.index == 0) {
        if (item.url1[0]) {
          this.fromSummit(item.url1[0].value, {
            authToken: this.accessToken,
            templateName: "donemoreinfo",
            infoID: null
          });
        }
      }
      if (item.index == 1) {
        if (item.url[0]) {
          this.fromSummit(item.url[0].value, {
            authToken: this.accessToken,
            templateName: "todomoreinfo",
            infoID: null
          });
        }
      }
    },
		onWidth() {
			let that = this
			setTimeout(function () {
				that.Width = that.$refs.list0.clientWidth - 160
			}, 0)
		},
	},
	created() {
		this.accessToken = this.getSession('accessToken')
		this.init()
	},
	mounted() {
		onSize(this, 'screenWidth') //监听赋值
		this.onWidth() //动态的添加宽度为了本页面的省略号才搞的
	},
}
</script>
<style lang="less" scoped>
.wrapper {
	width: 100%;
	height: 100%;
}
</style>
<style lang="less">
@import './less/home.less';
@import '../../styles/common.less';
.my-card {
	.ivu-card-body {
		padding: 10px 12px;
	}
}
.my-card1 {
	.ivu-card-body {
		padding: 0;
	}
}
</style>
<style scoped lang="less">
@import './less/page_home.less';
.demo-carousel {
	width: 100%;
	height: 100%;
}
.page_home_main {
	height: 100%;
}
.page_home_scroll {
	height: 100%;
	width: 100%;
}
</style>